<template>
  <div id="app_feed">
    <div class="c_popularNews_box"
         id="pop_app">
      <div class="c_grayTit">
        精彩推荐
      </div>
      <div class="c_popularNews">
        <template v-for="v in rdata">
          <!--图文-->
          <div class="c_popNcards1"
               v-if="!!v.thumb">
            <a :href="v.surl"
               target="_self"
               data-sudaclick="caitong_newsdetail_relatednews">
              <div class="c_popNtit1">{{v.title}}
              </div>
              <div class="c_popImg1">
                <img :src="v.thumb"
                     :alt="v.title">
              </div>
              <div class="c_popLabels">
                <span class="c_popAuthor">{{v.media}}</span>
                <span class="c_popIocns"
                      v-if="v.comment_count_show===0||v.comment_count_show"></span>
                <span class="c_popNums">{{v.comment_count_show}}</span>
              </div>
            </a>
          </div>
            <!--无图-->
          <div class="c_popNcards2 c_popNC border-1px" v-if="!v.thumb">
            <a :href="v.surl" target="_self" data-sudaclick="lottery_newsdetail_relatednews">
              <div class="c_popNtit2">{{v.title}}</div>
              <div class="c_popLabels">
                <span class="c_popAuthor">{{v.media}}</span>
                <span class="c_popIocns" v-if="v.comment_count_show===0||v.comment_count_show"></span>
                <span class="c_popNums">{{v.comment_count_show}}</span>
              </div>
            </a>
          </div>
        </template>
      </div>
    </div>
    <div class="c_16block"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rdata: {},
      docID: window.conf_comment.docID || "fyeycfp9258028",
      commentId: window.conf_comment.commentId || "ty:comos-fyeycfp9258028:0",
      pageUrl: "http://caitong.sina.cn/n/c/2017-05-22/detail-ifyfkqks4411650.d.html",
    }
  },
  methods: {
    init(_next) {
      var that = this;
      var jsonpUrl = "http://cre.dp.sina.cn/api/v3/get?merge=3&statics=1&this_page=1&rfunc=105&dedup=32&offset=0&length=5&cateid=Uni&mod=ct&cre=lotteryw&pageurl=" + that.pageUrl;
      var jsonpName = "cre_pageUrl";
      $.ajax({
        url: jsonpUrl,
        dataType: 'jsonp',
        data: {},
        cache: false,
        jsonpCallback: jsonpName,
        type: "get",
        success: function (data) {
          if (data.status.code === 0) {
            _next(data.data);
          } else {
            console.log("err");
            console.log(data);
          }
        }
      })
    },
  },
  created() {
    var that = this;
    var strUrl = window.location.href.split(".d.html")[0]+".d.html";
    that.pageUrl = strUrl;
    this.init(function (data) {
      that.rdata = data;
    })
  }

}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  lightFont=#95989A;
  btnBd=#EBE8E8;
c_grayTit() {
  background-color: c_bg;
  padding: 10px 0 10px 8px;
  color: lightFont;
  font-size 16px
}
.c_popularNews_box {}

.c_popularNews {
  padding-left: 8px;
}

.c_popNcards1 {
  position: relative;
  height: 110px;
  border-1px(c_split);
}

.c_popNtit1 {
  padding-top: 15px;
  font-size: 17px;
  color: #1a1a1c;
  line-height: 22px;
  overflow: hidden;
  height: 56px;
  padding-right: 125px;
}

.c_popImg1 {
  display: block;
  position: absolute;
  right: 8px;
  top: 14px;
  width: 104px;
  height: 77px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.c_popLabels {
  margin-top: 15px;
  height: 22px;
  line-height: 22px;
  font-size: 0;
  color: #95989a;
  span {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
  }
  .c_popIocns {
    background-image: url("../static/img/msg@2x.png");
    width: 17px;
    height: 16px;
    background-size: 17px 16px;
    margin: 0 7px 0 17px;
  }
}

.c_grayTit {
  background-color: c_bg;
  // padding: 10px 0 10px 8px;
  padding: 16px 0 12px 8px;
  color: lightFont;
  font-size: 16px;
}

.c_popNcards2 {
  padding-bottom: 16px;
  border-1px(c_split);
}

.c_popNtit2 {
  padding-top: 15px;
  padding-right: 10px;
  font-size: 17px;
  color: #1a1a1c;
  line-height: 22px;
  overflow: hidden;
  max-height: 56px;
}

.c_popImg2_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c_popImg2 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 96px;
  padding: 17px 8px 4px 0;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

</style>